{% extends "base.html" %}
{% load static %}
{% block header %}
<link rel="stylesheet" href="{% static 'css/annotation.css' %}" xmlns:v-on="http://www.w3.org/1999/xhtml">
<script src="https://unpkg.com/marked@0.3.6/lib/marked.js"></script>
<script src="https://unpkg.com/lodash@4.16.0/lodash.js"></script>
{% endblock %}
{% block navigation %}
{% if user.is_authenticated %}
<a class="navbar-item" href="{% url 'dataset' view.kwargs.project_id %}">
  <span class="icon">
    <i class="fas fa-edit"></i>
  </span>
    <b>Data / Settings</b>
</a>
{% endif %}
{% endblock %}
{% block content %}
<div class="columns" id="mail-app" v-cloak>
  <aside class="column is-3 aside hero is-fullheight">
    <div>
      <div class="main pr20 pl20">
        <div class="field has-addons">
          <div class="control is-expanded">
            <input class="input" type="text" placeholder="Search document" v-model="searchQuery" @keyup.enter="submit" style="border-right:none;box-shadow: none;-webkit-box-shadow: none;">
          </div>

          <div class="control">
            <div class="dropdown is-hoverable is-right">
              <div class="dropdown-trigger">
                <button class="button" aria-haspopup="true" aria-controls="dropdown-menu" style="border-left:none">
                  <span class="icon has-text-grey pr0">
                    <i class="fas fa-angle-down" aria-hidden="true"></i>
                  </span>
                </button>
              </div>
              <div class="dropdown-menu pt0" id="dropdown-menu" role="menu">
                <div class="dropdown-content">
                  <a class="dropdown-item">
                    <label class="radio">
                      <input type="radio" value="all" v-model="picked" checked> All
                    </label>
                  </a>
                  <a class="dropdown-item">
                    <label class="radio">
                      <input type="radio" value="active" v-model="picked"> Active
                    </label>
                  </a>
                  <a class="dropdown-item">
                    <label class="radio">
                      <input type="radio" value="completed" v-model="picked"> Completed
                    </label>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="main pt0 pb0 pr20 pl20">
        <span>About [[ count ]] results</span>
      </div>

      <div class="main">
        <a href="#" class="item" v-for="(doc, index) in docs" v-bind:class="{ active: index == pageNumber }" v-on:click="pageNumber = index"
          v-bind:data-preview-id="index">
          <span class="icon">
            <i class="fa fa-check" v-show="docs[index].annotated"></i>
          </span>
          <span class="name">[[ doc.text.slice(0, 60) ]]...</span>
        </a>
      </div>
    </div>
  </aside>
  <div class="column is-7 is-offset-1 message hero is-fullheight" id="message-pane">

    <!-- Modal card for creating project. -->
    <div class="modal" :class="{ 'is-active': isActive }">
        <div class="modal-background"></div>
        <div class="modal-card">
          <header class="modal-card-head">
            <p class="modal-card-title">Annotation Guideline</p>
            <button class="delete" aria-label="close" @click="isActive=!isActive"></button>
          </header>
          <section class="modal-card-body modal-card-body-footer content"
                   style="line-height:150%"
                   v-html="compiledMarkdown"></section>
        </div>
    </div>

      <div class="columns is-multiline is-gapless is-mobile is-vertical-center">
        <div class="column is-3">
            <progress class="progress is-inline-block" v-bind:class="progressColorTrain" v-bind:value="achievementTrain" max="100">30%</progress>
        </div>
        <div class="column is-4">
            <span class="ml10"><strong>[[ onlineLearningIndices.size ]]</strong></span>/<span>[[ onlineLearningPer ]]</span>
            <span> to train </span>
        </div>

        <div class="column is-0 has-text-right">
          <span class="tag is-small" v-bind:class="serverOn" disabled="">MODEL SERVER [[ serverMsg ]]</span>
          <span class="help-tip"><p>Something about embedding explanation</p></span>
        </div>
      </div>

    <div class="columns is-multiline is-gapless is-mobile is-vertical-center">
      <div class="column is-3">
        <progress class="progress is-inline-block" v-bind:class="progressColor" v-bind:value="achievement" max="100">30%</progress>
      </div>
      <div class="column is-4">
        <span class="ml10"><strong>[[ total - remaining ]]</strong></span>/<span>[[ total ]]</span>
          <span> to annotate </span>
      </div>

        <div class="column is-0 has-text-right">
          <span class="tag is-small" v-bind:class="nounOn" v-bind:value="achievementTrain" disabled="">Noun Chunk</span>
          <span class="tag is-small" v-bind:class="onlineOn" v-bind:value="achievementTrain" disabled="">Online Learning</span>
          <span class="tag is-small" v-bind:class="historyOn" v-bind:value="achievementTrain" disabled="">Annotation History</span>
          <span class="help-tip">
              <p> - Enabled sources for intelligent recommendations
                 If the option is "blue", the option is turned on.
                 For the online learning, If the model server is turned off, the option is automatically turned off and marked as "red".</p>
          </span>
        </div>

    </div>

    {% block annotation-area %} {% endblock %}

    <div class="level mt30">
      <a class="button level-left" v-on:click="prevPage" v-shortkey="{prev1: ['ctrl', 'p'], prev2: ['arrowup'], prev3: ['arrowleft']}"
        @shortkey="prevPage">
        <span class="icon">
          <i class="fas fa-chevron-left"></i>
        </span>
        <span>Prev</span>
      </a>
      <div class="level-right">
          <div>
        <a class="button level-right" v-on:click="nextPage" v-shortkey="{next1: ['ctrl', 'n'], next2: ['arrowdown'], next3: ['arrowright']}"
        @shortkey="nextPage">
            <span>Next</span>
            <span class="icon">
              <i class="fas fa-chevron-right"></i>
            </span>
        </a></div>
      </div>
    </div>
    <div class="level mt30">
        <a class="level-left"></a>
        <a class="button level-right" ref="confirm" v-on:click="confirm">
            <span>Skip (No entity)</span>
            <span class="icon">
              <i class="fas fa-chevron-right"></i>
            </span>
        </a>
    </div>
  </div>
</div>
{% endblock %}